<template>
  <div id="recharge">
    <div class="form-box">
      <group>
        <cell title="账户余额"><span class="text-orange">{{ yue }}</span></cell>
        <div class="vux-x-input weui-cell weui-vcode">
          <div class="weui-cell__hd">
            <label class="weui-label" style="width: 5em;">充值金额</label>
          </div>
          <div class="weui-cell__bd weui-cell__primary">
            <input class="weui-input" @input="keyUp" placeholder="请输入充值金额" v-model="money" />
          </div>
        </div>
      </group>
    </div>
    <div style="margin-top: 0.2rem; padding: 0.2rem;">
      <x-button type="primary" :show-loading="loading" action-type="button" @click.native="handleRecharge">{{ btn }}</x-button>
    </div>
  </div>
</template>
<script>
import { Cell } from 'vux'
import PubHeader from '../components/PubHeader.vue'

export default{
  components: {
    PubHeader,
    Cell
  },
  beforeRouteEnter(to, from, next) {
    if(window.localStorage.openid){
      next()
    } else {
      window.location = $config.wechatHost + '/pay/wechat/wechat.php'
    }
  },
  created() {
    this.openid = window.localStorage.openid

    this.$http.post($config.host + '/api/Account/getrechargeGongZhongWxpayconf', qs.stringify({
      url: 'https://wap.tuniaoapp.com/?#/recharge',
      uid: this.$store.state.userInfo.uid,
      client: $config.client_type,
      device: $config.device_type,
      token: this.$store.state.userInfo.token
    })).then((res) => {
      const data = res.data
      this.$wechat.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: data.appId, // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.signature,// 必填，签名，见附录1
        jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      })
    })
    .catch((error) => {
      this.$vux.toast.text($config.errWechatMsg, 'middle')
    })
    this.getData()
  },
  data() {
    return {
      money: '',
      t_money: undefined,
      openid: '',
      loading: false,
      btn: '充值',
      yue: ''
    }
  },
  methods: {
    getData() {
      this.$http.post($config.host + '/api/Account/myAccountInfo', qs.stringify({
        uid: this.$store.state.userInfo.uid,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token
      })).then(res => {
        const {code, data, msg} = res.data
        if(code == 1 && data) {
          this.yue = data.money
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch(err => {
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    },
    keyUp() {
      if (!this.money.match(/^\d*?\.?\d{0,2}?$/)){
        if(this.t_money === undefined){
          this.t_money = '';
        }
        this.money = this.t_money;
      } else {
        this.t_money = this.money;
      }
    },
    handleRecharge() {
      if (!this.money.match(/^[0-9]+(.[0-9]{1,2})?$/) || !this.money || this.money <= 0){
        this.$vux.toast.text('充值金额填写错误', 'middle')
        return false
      }
      this.loading = true
      this.btn = '正在充值,请勿操作..'

      this.$http.post($config.host + '/api/Account/rechargeGongZhongWxpay', qs.stringify({
        openid: this.openid,
        money: this.money,
        uid: this.$store.state.userInfo.uid,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token
      })).then((res) => {
        const { data, code, msg } = res.data
        if(code == 1 && data){
          this.$wechat.chooseWXPay({
            timestamp: data.timeStamp,
            nonceStr: data.nonceStr,
            package: data.package,
            signType: data.signType,
            paySign: data.paySign,
            success: (res) => {
              this.money = ''
              this.$vux.toast.text('充值成功', 'middle')
              this.getData()
            }
          })
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
        this.btn = '充值'
        this.loading = false
      }).catch((error) => {
        this.loading = false
        this.btn = '充值'
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    }
  }
}
</script>
